<template>
    <mavon-editor
            class="md"
            :value="context"
            :subfield="prop.subfield"
            :defaultOpen="prop.defaultOpen"
            :toolbarsFlag="prop.toolbarsFlag"
            :editable="prop.editable"
            :scrollStyle="prop.scrollStyle"
            :codeStyle="prop.codeStyle"
            :previewBackground="prop.previewBackground"
            style="width: 70%;margin: 0 auto;"
    ></mavon-editor>
</template>

<script>
    export default {
        name: "MarkdownDisplay",
        data(){
            return{
                context:"# Ajax\n" +
                    "\n" +
                    "## 1.概念:\n" +
                    "\n" +
                    "- Asynchronous ==JavaScript== And Xml 异步的javaScript 和 xml\n" +
                    "  - 异步和同步 : 客户端和服务器端项目通信的基础上\n" +
                    "    - 同步 : 客户端必须等待服务器端的响应,在等待的期间不能做其他操作(页面刷新)\n" +
                    "    - 异步 : 客户端不需要等待服务的响应,在服务器处理请求的过程中,客户端可以进行其他的操作(页面不刷新)\n" +
                    "- 提升用户体验\n" +
                    "- \n" +
                    "\n" +
                    "## 1.实现方式\n" +
                    "\n" +
                    "# Json\n" +
                    "\n" +
                    "1. JSON(JavaScript Object Notation):(js对象表示法):是一种轻量级(和xml相比很轻量)的数据交换格式\n" +
                    "\n" +
                    "```\n" +
                    "{key:value,key:value}\n" +
                    "Value: 可以有多种\n" +
                    "    1). 基本数据类型\n" +
                    "    2). 数组\n" +
                    "        {lastName : \"李四\",books:['西游记',\"三国\",{对象一.对象2}]}\n" +
                    "        \n" +
                    "完整的josn对象:\n" +
                    "var student = {lastName: \"陈卓\",age:\"18\",car:{pp:\"宝马\",Price:\"3000$\"},books:[{bookName:\"三国\", }]}\n" +
                    "        \n" +
                    "```\n" +
                    "\n" +
                    "1. 如果服务器放回给浏览器的数据是json格式,浏览器使用js解析就会很方便\n" +
                    "2. JSON: js对象进行传输(HTTP(只能传输文本))\n" +
                    "3. 使用JSON.stringify(student),将student转换成字符串格式\n" +
                    "4. 使用JSON.parse(josnstr),将json字符串回转为js对象"
            }
        },
        computed: {
            prop () {
                let data = {
                    // 单双栏模式
                    subfield: false,
                    //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
                    defaultOpen: 'preview',
                    editable: false,
                    toolbarsFlag: false,
                    scrollStyle: true,
                    codeStyle:"atelier-seaside-dark",
                    previewBackground:"#fff"
                }
                return data
            }
        },
    }
</script>

<style scoped>

</style>